   <meta charset="UTF-8">
<style>
    * {
      padding: 0;
      margin: 0;
    }
    html,
    body,
    #root {
      height: 100%;
    }
    #root {
      display: flex;
    }
    .menu {
      width: 200px;
      height: 100%;
      background-color: #263445;
      transition:all 1s;
    }
    .menu li:hover {
      color: red;
      cursor: pointer;
    }
    .menu li {
      width: 100%;
      height: 50px;
      color: #ccc;
      font-size: 20;
      line-height: 50px;
      text-align: center;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: #ccc;
    }
    .top i{
        font-size: 50px !important;
        margin-left: 20px;
        cursor: pointer;
    }
    .menu i{
        font-size: 20px !important;
        cursor: pointer;
    }
    .main .top {
      width: 100%;
      height: 50px;
      background-color: green;
      display: flex;
      align-items: center;
    }
  
    .main .content {
      flex: 1;
      background-color: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
    .main span{
        font-size: 30px;
    }
    .main .content div{
        font-size: 50px;
        border: 10px solid grey;
        width: 80%;
        height: 80%;
  
        /* margin-left: 100px; */
    }

  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3180755_u5zp69b7a6.css">

<div id="root">
    <div class="menu" :style="{width: menuWidth}">
        <ul>
            <li @click="who='index'"><i class="iconfont icon-caidan"></i>{{menuWidth === 200 ? '后台首页' : ''}}</li>
            <li @click="who='orders'"><i class="iconfont icon-caidan"></i>{{menuWidth === 200 ? '商品管理' : ''}}</li>
            <li @click="who='goods'"><i class="iconfont icon-caidan"></i>{{menuWidth === 200 ? '订单管理' : ''}}</li>
            <li @click="who='users'"><i class="iconfont icon-caidan"></i>{{menuWidth === 200 ? '用户管理' : ''}}</li>
        </ul>
    </div>
    <div class="main">
        <div class="top">
            <!-- <i class="iconfont icon-caidan"></i> -->
            <!-- <i class="['iconfont', icon-shouqicaidan]"></i> -->
            <i :class="['iconfont', menuIcon]" @click="changeMenuFn"></i>
            <!-- <button  @click="menuWidth=menuWidth=== '200px' ? '64px' : '200px'" ></button> -->
            <span>后台首页</span> &gt;

            <transition enter-active-class="animated bounceInRight">
              <span
                v-for="item in [
                  {id:1, url: 'index', name: '后台首页'},
                  {id:2, url: 'goods', name: '商品管理'},
                  {id:3, url: 'orders', name: '订单管理'},
                  {id:4, url: 'users', name: '用户管理'},
                ]"
                v-if="who === item.url"
                :key="item.id"
                style="display: inline-block"
                >{{item.name}}</span
              >
            </transition>
        </div>
        <div class="content">
            <transition enter-active-class="animated fadeInRightBig">
            <component :is="who" ></component>
        </transition>
   
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

Vue.component('index',{
    template:`<div>
        <h1>后台首页</h1>
        </div>`
});
Vue.component('orders',{
    template:`<div><h1>商品管理</h1></div>`
});
Vue.component('goods',{
    template:`<div><h1>订单管理</h1></div>`
});
Vue.component('users',{
    template:`<div><h1>用户管理</h1></div>`
});
const vm = new Vue({
    el: "#root",
    data: {
        who: "index",
        menuWidth: 200,
        menuIcon: 'icon-shouqicaidan'
    },
    methods: {
        changeMenuFn() {
            if (this.menuWidth === 200)
            {
                this.menuWidth = 64
                this.menuIcon = 'icon-zhankaicaidan'
            } else {
                this.menuWidth = 200
                this.menuIcon = 'icon-shouqicaidan'
            }
        }
    }
})
</script>